import React from 'react'
import ReactDom from 'react-dom'
import './index.css'//样式引入

// class App extends React.Component {

//   constructor(props) {
//     super(props);

//     this.state = {
//       door: 'open'
//     }
//     // 绑定事件得bind
//     // this.handleClick = this.handleClick.bind(this)
    
//   }
  
//   // 和bind 二选一
//   //? 给事件绑定的函数传递参数
  
//   handleClick = (id,e) => {
//     // e.target
//     console.log(id, e)

//     this.setState({
//       door:'close'
//     })
//   }

//   render() {
//     const {door} = this.state

//     return (
//       // <h1 className='app' onClick={this.handleClick}>{door}事件绑定</h1>

//       //! () => {this.handleClick()} 这种绑定方式render时候onClick都会生成一个新的函数，影响性能
//       // <h1 className='app' onClick={(e) => {this.handleClick('id 1', e)}}>{door}事件绑定</h1>

//       //! 在事件绑定时，需要传多余参数，推荐通过bind方式
//       <h1 onClick={this.handleClick.bind(this,'id 1')}>{door}事件绑定</h1>
//     )
//   }
// }



function Count(props) {
  //* 无状态组件里面，props是通过参数传入的
  return (
    <div className='count'>{props.count}</div>
  )
}


class App extends React.Component {
  render() {
    // const {name} = this.props
    return (
      <h1><Count count="1"></Count></h1>
    )
  }
}

// props 从标签属性上来 类似id，class一样，通过this.props可以拿到
// props => 组件的外部状态
ReactDom.render(<App name="我是props1" />, document.getElementById("root"))